<template>
  <a-card :bordered="false">
    <screen ref="screen" :selectedRowKeys="selectedRowKeys" @handleAddAndEdit="handleAddAndEdit(null)" @refreshList="refreshList" @onSearch="onSearch"></screen>
    <s-table ref="table" size="default" :rowKey="record => record.id" :columns="columns" :data="loadData" :rowSelection="rowSelection" :pagination="paginationProps" :scroll="{ x: 1300 }">
      <span slot="showImage" slot-scope="record">
        <!-- <img class="img" :src="`${record.picImg}?imageView2/1/w/60/h/60/q/75`" alt="" @click="handleShowImg(record.picImg)" /> -->
        <img class="img" :src="record.picImg" alt="" @click="handleShowImg(record.picImg)" />
      </span>
      <span class="product-img" slot="productImage" slot-scope="text, record, index">
        <div class="img-item" @click="handleDetails(product.code)" v-for="product in record.productList" :key="product.code">
          <a-tooltip placement="top">
            <template slot="title">
              <span>{{ product.code }}</span>
            </template>
            <img class="img" :src="product.productImage" alt="" />
          </a-tooltip>
        </div>
      </span>
      <span slot="tag" slot-scope="record">
        <a-tag style="margin: 2px" color="blue" v-for="(label, index) in record.labelList" :key="index">
          {{ label }}
        </a-tag>
      </span>
      <span slot="status" slot-scope="record">
        <span v-if="record.status === 1">上架</span>
        <span v-if="record.status === 0">下架</span>
      </span>
      <span slot="action" slot-scope="record">
        <a @click="handleAddAndEdit(record.id)">编辑</a>
        <a-divider type="vertical" />
        <a v-if="record.status === 0" @click="handleUpOrDown(1, record.id)">上架</a>
        <a v-if="record.status === 1" @click="handleUpOrDown(0, record.id)">下架</a>
        <a-divider type="vertical" />
        <a-popconfirm title="确定删除？" @confirm="handleMatchDelete(record.id)">
          <a-icon slot="icon" type="question-circle-o" style="color: red" />
          <a href="javascript:;">删除</a>
        </a-popconfirm>
        <a-divider type="vertical" />
        <a @click="handleLog(record.id)">日志</a>
        <a-divider type="vertical" />
        <a-popover title="Title">
          <template slot="content">
            <p>/pages/collocation/detail/index?id={{ record.id }}</p>
          </template>
          <a href="javascript:;">
            小程序
          </a>
        </a-popover>
      </span>
    </s-table>
    <a-modal v-model="visible" width="700px" :footer="null" title="商品详情" @cancel="visible = false">
      <div class="details-wrapper">
        <img class="main-img" :src="productDetails.imgurl" alt="" />
        <div class="text">
          <div class="t">款号：{{ productDetails.name }}</div>
          <div class="t">品名：{{ productDetails.value }}</div>
          <div class="t">年份：{{ productDetails.year }}</div>
          <div class="t">波段：{{ productDetails.band }}</div>
          <div class="t">品牌：{{ productDetails.brand }}</div>
          <div class="t">大类：{{ productDetails.bigClass }}</div>
          <div class="t">小类：{{ productDetails.smallClass }}</div>
        </div>
      </div>
    </a-modal>
    <a-modal v-model="showVisible" width="600px" :footer="null" title="效果图" @cancel="showVisible = false">
      <img class="show-img" :src="showImg" alt="" />
    </a-modal>
    <Log :logVisible.sync="logVisible" ref="log"></Log>
  </a-card>
</template>
<script>
import { matchList, matchDelete, goodsSkcDetail, upOrDown } from '@/api/box/boxLook'
import { STable } from '../components'
import screen from './components/Screen'
import Log from './components/Log'

const columns = [
  {
    title: 'ID',
    width: 100,
    dataIndex: 'id'
  },
  {
    title: '名称',
    width: 100,
    dataIndex: 'name'
  },
  /* {
    title: '效果图',
    width: 100,
    scopedSlots: { customRender: 'showImage' }
  }, */
  {
    title: '商品',
    width: 400,
    scopedSlots: { customRender: 'productImage' }
  },
  {
    title: '属性/标签',
    width: 300,
    scopedSlots: { customRender: 'tag' }
  },
  {
    title: '状态',
    width: 100,
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '搭配师',
    width: 100,
    dataIndex: 'fashionerName'
  },
  // {
  //   title: '上下架时间',
  //   width: 400,
  //   dataIndex: 'createTime'
  //   // scopedSlots: { customRender: 'brand' }
  // },
  {
    title: '创建时间',
    width: 220,
    dataIndex: 'createTime'
  },
  {
    title: '操作',
    width: 150,
    align: 'center',
    fixed: 'right',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  components: {
    screen,
    STable,
    Log
  },
  data() {
    return {
      showImg: '',
      showVisible: false,
      logVisible: false,
      productDetails: {},
      visible: false,
      columns,
      // pageSize: 10,
      paginationProps: {
        total: 0,
        showTotal: total => `共有 ${total} 条数据`
        // onShowSizeChange: (current, pageSize) => this.changePageSize(current, pageSize)
      },
      queryParam: {},
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        const data = {
          page: parameter,
          requestData: {
            ...this.queryParam
          }
        }
        return matchList(data).then(res => {
          if (res.code === 0) {
            const data = res
            return data
          } else {
            this.$message.error(res.msg)
            const data = {
              page: {
                pageNo: 0
              },
              data: []
            }
            return data
          }
        })
      },
      selectedRowKeys: []
    }
  },
  created() {},
  computed: {
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectChange
      }
    }
  },
  watch: {
    $route(to, from) {
      if (from.path.includes('/box/boxLook/addAndEdit') && to.path.includes('/box/boxLook/index')) {
        this.$refs.table.refresh() // 来自会员详情刷新当前列表
      } else {
        let currentPath = this.$route.path
        if (currentPath.includes('/box/boxLook/index')) {
          console.log('**************2***********')
          this.$refs.screen.reset()
          this.selectedRowKeys = []
        }
      }
    }
  },
  mounted() {},
  methods: {
    handleShowImg(url) {
      this.showImg = url
      this.showVisible = true
    },
    handleLog(id) {
      this.$refs.log.getLog(id, 'parent')
      this.logVisible = true
    },
    handleUpOrDown(type, ids) {
      const data = {
        requestData: {
          ids: [ids],
          type // :1上架，0下架
        }
      }
      upOrDown(data).then(res => {
        if (res.code == 0) {
          this.$refs.table.refresh()
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    handleMatchDelete(id) {
      matchDelete(id).then(res => {
        if (res.code == 0) {
          this.$refs.table.refresh()
        } else {
          this.$message.warning(res.msg)
        }
      })
    },

    handleDetails(item) {
      const colorNo = item.substring(item.length - 3)
      const productCode = item.substring(0, item.length - 3)
      this.productDetails = {}
      this.visible = true
      const data = {
        requestData: {
          colorNo,
          productCode
        }
      }
      goodsSkcDetail(data).then(res => {
        if (res.code == 0) {
          this.productDetails = res.data
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    handleAddAndEdit(id) {
      this.$router.push(`/box/boxLook/addAndEdit/${id}`)
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    onSearch(obj) {
      this.queryParam = obj
      this.$refs.table.refresh(true)
    },
    refreshList() {
      this.selectedRowKeys = []
      this.$refs.table.refresh()
    }
  }
}
</script>
<style lang="less" scoped>
.show-img {
  display: block;
  width: 100%;
}
.details-wrapper {
  display: flex;
  padding-bottom: 40px;
  .main-img {
    display: block;
    width: 40%;
  }
  .text {
    flex: 1;
    margin-left: 10%;
    line-height: 35px;
    font-size: 14px;
  }
}
.id-wrapper {
  font-size: 12px;
  text-align: center;
  span {
    color: #999;
  }
}
.product-img {
  font-size: 12px;
  .img-item {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
    text-align: center;
  }
}
.time {
  font-size: 12px;
  color: #999;
}
.img {
  display: block;
  margin: 2px auto;
  width: 60px;
  height: 60px;
  border: 1px dashed #f5f5f5;
  object-fit: scale-down;
  cursor: pointer;
}
</style>

